<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户区域导入</title>

    <!--引入本地 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <!--    引入Layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>

</head>
<body>

    <div id="app">
        <div>
            <div>
                <el-row>
                    <el-upload
                            :action="uploadAction"
                            :headers="headers"
                            :on-success="uploadSuccess"
                            :file-list="uploadFileList" >
                        <el-button size="small" type="primary">选择xls文件</el-button>
                    </el-upload>
                </el-row>
            </div>

            <div style="margin-top: 25px;" v-if="headList.length>0" >
                <div>请选择字段进行匹配客户信息
                    <el-button  style="margin-left: 0px;"   type="primary" size="small" @click="peipi" >匹配</el-button>

                </div>
                <div style="margin-top: 10px;" >
                    <table >
                        <tr>
                            <td>
                                xls字段
                            </td>
                            <td>
                                <el-divider direction="vertical"></el-divider>
                            </td>
                            <td>
                                客户信息字段
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <el-radio-group size="small" v-model="leftSelects" >
                                    <template v-for="(item,index) in headList" >
                                        <el-radio :label="item" border style="margin: 2px;"  >{{item}}</el-radio>
                                    </template>
                                </el-radio-group>
                            </td>

                            <td>
                                <el-divider direction="vertical"></el-divider>
                            </td>

                            <td>
                                <el-radio-group size="small" v-model="rightSelects" >
                                    <template v-for="(item,index) in khxxColumnList" >
                                        <el-radio :label="item.show_name+'@'+item.col_name" border style="margin: 2px;"  >{{item.show_name}}</el-radio>
                                    </template>
                                </el-radio-group>
                            </td>
                        </tr>
                    </table>


                    <el-divider></el-divider>

                    <div>已匹配字段
                        <el-button  style="margin-left: 0px;"   type="primary" size="small" @click="qingkong" >清空</el-button>
                        <el-button  style="margin-left: 0px;"   type="primary" size="small" @click="searchKehuList" >查询</el-button>
                    </div>

                    <el-radio-group size="small" v-model="yipeipiSelect" >
                        <template v-for="(item,index) in submitSelect" >
                            <el-radio :label="item" border style="margin: 2px;"  >{{item.left}} -> {{item.right}}</el-radio>
                        </template>
                    </el-radio-group>

                </div>

                <el-divider></el-divider>
                <div v-if="tableData_weipipei.length>0" >
                    未匹配记录：
                    <el-table
                            :data="tableData_weipipei"
                            border
                            :height="400"
                            style="width: 100%">
                        <el-table-column v-for="(item,index) in 15"
                                :prop="''+index+''" width="190"
                                :label="'第'+index+'列'" >
                            <template  slot-scope="scope">
                                <!--列表输入框进行编辑-->
                                <template>
                                    <el-input  size="mini" v-model="scope.row[index]"  ></el-input>
                                    <el-button  style="margin-left: 0px;"   type="primary" size="small" @click="searchcolumns_query(scope.row[index])" >查询</el-button>
                                </template>
                            </template>
                        </el-table-column>


                    </el-table>
                </div>
                <el-pagination
                        background
                        layout="total,sizes"
                        :page-size="10000"
                        :page-sizes="10000"
                        :total="tableData.length">
                </el-pagination>
                <div style="margin-top: 10px;">
                    <el-table
                            :data="tableData"
                            border
                            :height="400"
                            style="width: 100%">
                        <el-table-column
                                prop="name"
                                label="客户名称"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="sfzh"
                                label="身份证号"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="dh"
                                label="客户电话">
                        </el-table-column>

                        <el-table-column
                                prop="khbh"
                                label="客户编号">
                        </el-table-column>
                        <el-table-column
                                prop="xxdz"
                                label="详细地址">
                        </el-table-column>
                        <el-table-column
                                prop="bjh"
                                label="表具号">
                        </el-table-column>
                        <el-table-column
                                prop="khsj"
                                label="开户时间">
                        </el-table-column>

                        <el-table-column
                                fixed="right"
                                label="操作"
                                width="100">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="yichu(scope.row.id)" >移除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>



        </div>


        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="95%"
                :before-close="handleClose">
            <span>
                <el-table
                        :data="tableData_column_search"
                        border
                        :height="400"
                        style="width: 100%">
                        <el-table-column
                                prop="name"
                                label="客户名称"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="sfzh"
                                label="身份证号"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="dh"
                                label="客户电话">
                        </el-table-column>

                        <el-table-column
                                prop="khbh"
                                label="客户编号">
                        </el-table-column>
                        <el-table-column
                                prop="xxdz"
                                label="详细地址">
                        </el-table-column>
                        <el-table-column
                                prop="bjh"
                                label="表具号">
                        </el-table-column>
                        <el-table-column
                                prop="khsj"
                                label="开户时间">
                        </el-table-column>


                    </el-table>
            </span>

        </el-dialog>


    </div>




    <script>
        var vm = new Vue({
           el:"#app",
           data:{
               uploadAction:wwwurl+"/admin/api/UploadController/elementUiUploadDopostFileUpload",
               uploadFileList:[],
               headers:{token:localStorage.getItem("token")},
               xlsPath:"",
               leftSelects:[],
               rightSelects:[],
               submitSelect:[],
               yipeipiSelect:[],
               headList:[],
               khxxColumnList:[],
               parmsData:{},
               tableData: [],
               tableData_weipipei:[],
               tableData_column_search:[],
               dialogVisible:false,
           },
           created(){
               this.parmsData = getParams();
               this.getKehuColumns();
           },
           methods:{
               async searchcolumns_query(v){
                   let i = load();
                   const res = await postWebCustom(getTableId("1101"),{v:v});
                   layer.close(i);
                   this.tableData_column_search = res.data;
                   this.dialogVisible = true;
               },
               handleClose(done) {
                   done();
               },
               async yichu(id){
                   let i = load();
                   const res = await postWebCustom(getTableId("1088"),{id:id});
                   layer.close(i);
                   if(res.code == 1){
                       this.tableData = res.data;
                   }
               },
               qingkong(){
                   this.submitSelect = [];
                   this.tableData = [];
               },
               peipi(){
                   if(this.leftSelects.length == 0 || this.rightSelects.length == 0){
                       top.alert("请选择匹配字段");
                       return ;
                   }
                   this.submitSelect.push({left:this.leftSelects,right:this.rightSelects});
                   this.leftSelects = [];
                   this.rightSelects = [];
               },
               async searchKehuList(){
                   let i = load();
                   const res = await postWebCustom(getTableId("1087"),{select_cols:JSON.stringify(this.submitSelect),xls:this.xlsPath,weipipei:JSON.stringify(this.tableData_weipipei)});
                   layer.close(i);
                   this.tableData = res.data;

                   //查询未匹配的信息
                   const res2 = await postWebCustom(getTableId("1091"),{});
                   this.tableData_weipipei = res2.data;
               },
               uploadSuccess(response, file, fileList){
                   this.xlsPath = response.data.src;
                   this.getExcelHead();
               },
               async getKehuColumns(){
                   const res = await postWebCustom(getTableId("1086"),{});
                   this.khxxColumnList = res.data;
               },
               async getExcelHead(){
                   const res = await postWebCustom(getTableId("1085"),{xls:this.xlsPath});
                   this.headList = res.data;
               }
           }
        });



        //验证必填项
        function verification() {
            return true;
        }

        function getData() {
            let dataObj = {qyid:vm.parmsData.id};
            return dataObj;
        }


        function setData(data) {

        }

    </script>
</body>
</html>